<template>
  <el-card>

  <el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="客户名">
    <el-select v-model="value" placeholder="请选择" filterable="true">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="success">确定</el-button>
   
  </el-form-item>
 
   </el-form>
    <el-table :data="tableData">
      <el-table-column
        v-for="column in columnList"
        :key="column.key"
        :label="column.label"
        :prop="column.prop"
        :formatter="column.render"
        :render-header="column.renderHeader"
      />
    </el-table>
     <el-button type="primary" @click="addRow()" icon="el-icon-plus" > </el-button>
       <el-button type="success" @click="addRow()" icon="el-icon-check"></el-button>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
       options: [],
             value: '',
      formInline: {
          user: '',
          region: ''
        },
      tableData: [{ id: "1", specs:"斤",gooodsName: "苹果",unit:"40",amount:10,price:4, edit: false }],
      columnList: [
        {
          id: 1,
          prop: "gooodsName",
          label: "名称",
          width: 180,
          // eslint-disable-next-line no-unused-vars
          render: (row, column, cellValue, index) => {
            return row.edit ? (
              <el-input v-model={row.gooodsName}></el-input>
            ) : (
              row.gooodsName
            );
          },
        },
        {
          id: 2,
          prop: "specs",
          label: "规格",
          width: 80,
          // eslint-disable-next-line no-unused-vars
          render: (row, column, cellValue, index) => {
            return row.edit ? (
              <el-input v-model={row.specs}></el-input>
            ) : (
              row.specs
            );
          },
        },
         {
          id: 3,
          prop: "unit",
          label: "单位",
          // eslint-disable-next-line no-unused-vars
          render: (row, column, cellValue, index) => {
            return row.edit ? (
              <el-input v-model={row.unit}></el-input>
            ) : (
              row.unit
            );
          },
        },
         {
          id: 4,
          prop: "amount",
          label: "数量",
          // eslint-disable-next-line no-unused-vars
          render: (row, column, cellValue, index) => {
            return row.edit ? (
              <el-input v-model={row.amount}></el-input>
            ) : (
              row.amount
            );
          },
        },
         {
          id: 5,
          prop: "prices",
          label: "单价",
          // eslint-disable-next-line no-unused-vars
          render: (row, column, cellValue, index) => {
            return row.edit ? (
              <el-input v-model={row.price}></el-input>
            ) : (
              row.price
            );
          },
        },
        {
          label: "操作",
          width: 30,
          render: (row, column, cellValue, index) => {
            return (
              <div>
                {row.edit ? (
                  <el-button type="text" onClick={() => this.saveRow(index)}>
                    保存
                  </el-button>
                ) : (
                  <el-button type="text" onClick={() => this.editRow(index)}>
                    编辑
                  </el-button>
                )}
                <el-popover placement="top" ref={`delete-${index}`}>
                  <p>{`确定删除吗`}</p>
                  <div style="text-align: right; margin: 0">
                    <el-button
                      type="primary"
                      onClick={() => {
                        this.$refs[`delete-${index}`].doClose();
                      }}
                      plain
                    >
                      取消
                    </el-button>
                    <el-button
                      type="primary"
                      onClick={() => {
                        this.$refs[`delete-${index}`].doClose();
                        this.deleteRow(index);
                      }}
                    >
                      确定
                    </el-button>
                  </div>
                  <el-button
                    style="margin-left: 16px"
                    type="text"
                    slot="reference"
                  >
                    删除
                  </el-button>
                </el-popover>
              </div>
            );
          },
        },
      ],
    };
  },
  methods: {
    // 添加行
    addRow() {
      const { tableData } = this;
      const rowData = {
        id: "",
        gooodsName: "",
        unit: "",
        specs:"",
        amount:"",
        price:"",
        edit: true,
      };
      tableData.push(rowData);
    },
    // 保存行
    saveRow(index) {
      const { tableData } = this;
      tableData[index].edit = false;
    },
    // 编辑行
    editRow(index) {
      const { tableData } = this;
      tableData[index].edit = true;
    },
    // 删除行
    deleteRow(index) {
      this.tableData.splice(index, 1);
    },
     onSubmit() {
        console.log('submit!');
      }
  },
};
</script>

<style>
</style>
